<template>
    <div>
        <Affix :offset-top="0">
            <div class="topPromptBox">
                <p>请保持本应用APP一直处于运行状态</p>
            </div>
        </Affix>

        <div class="contentBox">
            <div><span class="label">注册邮箱:</span> <span class="valueBox">{{ merchant.email }}</span></div>
            <div><span class="label">商户号:</span> <span class="valueBox">{{ merchant.code }}</span></div>
            <div><span class="label">服务费余额:</span> <span class="valueBox">{{ merchant.serviceChargeBalance}}元</span></div>
            <div><span class="label">服务费率:</span> <span class="valueBox">{{ merchant.serverChargeRate }}/元</span></div>
            <div><span class="label">收款支付宝账号:</span> <span class="valueBox">{{ merchantAccount.zfbAccount }}</span></div>
        </div>
        
        <div class="statisticsDataBox">
            <Divider>收款统计数据</Divider>
            <Tag color="primary">订单总金额: <span class="moenyBox">{{statisticsData.totalAmount}}</span>元</Tag> 
            <Tag color="primary">总消耗服务费: <span class="moenyBox">{{statisticsData.totalServiceCharge}}</span>元</Tag> 
            <Tag color="success">支付成功总金额: <span class="moenyBox">{{statisticsData.payedAmount}}</span>元</Tag> 
            <Tag color="success">回调通知成功总金额: <span class="moenyBox">{{statisticsData.notifyAmount}}</span>元</Tag> 
            <Tag color="success">今日支付成功金额: <span class="moenyBox">{{statisticsData.currentStatusAmount}}</span>元</Tag> 
        </div>
        <Divider style="color:#ccc;">下面没内容了</Divider>
        <div class="btnBox">
            <Button type="success" @click="loginOut">安全退出</Button>
        </div>
    </div>
</template>

<script>
import MerchantInfoApi from "@/apis/MerchantInfoManage";
import ServerResponseCode from "@/utils/ServerResponseCode";
import MerchantPayOrderManage from "@/apis/MerchantPayOrderManage";
import { setEnviromentForApp } from '@/utils/auth';
import { getToken, removeToken, getMerchantAccount } from '@/utils/auth';

export default {
    data() {
        return {
            // 重新加载数据的定时器对象
            reloadTimer: null,
            merchant: {
                code: '',
                email: '',
                serviceChargeBalance: '',
                serverChargeRate: '',
            },
            
            // 统计数据
            statisticsData: {
                // 总的订单金额，单位元
                totalAmount: "0.00",
                // 总消耗的服务费
                totalServiceCharge: "0.00",
                // 支付成功总金额
                payedAmount: "0.00",
                // 回调通知成功金额
                notifyAmount: "0.00",
                // 当前状态下的总金额
                currentStatusAmount: "0.00",
            },
            // 收款账号对象
            merchantAccount:{}
        }
    },
    methods: {
        // 查询商户信息
        loadMerchantInfo() {
            MerchantInfoApi.fetchMerchant().then(response => {
                if (response.code === ServerResponseCode.SUCCESS) {
                    this.merchant = response.data;
                    // 设置3分钟再调用一次
                    this.reloadTimer = setTimeout(() => {
                        this.loadMerchantInfo();
                        // 查询订单统计数据
                        this.loadStatisticsData();
                    }, 3 * 60 * 1000);
                } else {
                    this.$Message.warning(response.msg);
                }
            });
            
        },
        // 检查是否有token。如果不存在，则直接跳转到登录界面
        checkTokenExist() {
            let token = getToken();
            if(!token){
                this.$router.push({path: "/app/login"});
                return false;
            }
            return true;
        },
        // 查询订单统计数据
        loadStatisticsData(){
            let queryParams = {
                account: this.$route.query.account,
                // 订单时间段--开始时间，格式 yyyy-MM-dd HH:mm:ss
                startTime: null,
                // 订单时间段--结束时间，格式 yyyy-MM-dd HH:mm:ss
                endTime: null,
                // 订单状态
                status: 4
            };
            MerchantPayOrderManage.loadStatisticsData(queryParams).then(response => {
                if (response.code === ServerResponseCode.SUCCESS) {
                    this.statisticsData = response.data;
                } else {
                    this.$Message.warning(response.msg);
                }
            });
        },
        // 打开退出对话框
        loginOut() {
            this.$Modal.confirm({
                title: "提示",
                content: "您确定要安全退出吗?",
                onOk: () => { 
                    // 清除定时器
                    clearInterval(this.reloadTimer);        
                    this.reloadTimer = null;
                    // 删除本地token
                    removeToken();
                    // 跳转到登录页面
                    // 2、跳转到主页
                    this.$router.push({path: "/app/login"});
                    // 删除本地原始token
                    window.pay.deleteUserInfo();
                }
            });
        }
    },
    // 组件挂载时执行
    mounted() {
        // 设置环境
        setEnviromentForApp();
        // 检查一下token
        if(this.checkTokenExist()) {
            // 获取商户收款对象
            this.merchantAccount = getMerchantAccount();
            // 获取商户信息
            this.loadMerchantInfo();
            // 查询订单统计数据
            this.loadStatisticsData();
        }
    }
}
</script>

<style scoped>
.mainBox {
    text-align: center;
    margin-top: 30%;
}
.topPromptBox{
    background-color: #2d8cf0;
    color: #fff;
    text-align: center;
    padding: 10px 0;
    font-size: 16px;
}

h1 {
    text-align: center;
}
.contentBox {
    padding: 10px 0;
}
.contentBox .label{
    width: 150px;
    text-align: right;
    display: inline-block;
    font-size: 16px;
}

.contentBox .valueBox{
    display: inline-block;
    font-size: 18px;
    padding-left: 10px;
}
.btnBox{
    text-align: center;
}

.statisticsDataBox{
    text-align: center;
}
.statisticsDataBox .Tag{
    padding: 5px;
}
.statisticsDataBox .ivu-tag-text{
    font-size: 18px!important;
}
.statisticsDataBox .moenyBox{
    font-size: 14px;
    padding-right: 5px;
}
</style>
